<template>
  <div>
    <el-form ref="form" :model="form" label-width="130px" size="small" inline label-suffix="：" :rules="rules">
      <div class="box-title">箱信息</div>
      <el-row>
        <el-col :span=8 >
          <el-form-item label="箱号" prop="cntrno">
            <el-input v-model="form.cntrno" placeholder="请输入箱号" clearable style="width:150px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item label="箱型尺寸" prop="cszCsizecd">
            <el-select v-model="sizeType" placeholder="请选择" clearable @change="changeCszCsizecd" style="width:150px">
              <el-option v-for="item in cszCsizecdList" :key="item.id"
                :label="item.containerType + '/' + item.containerSize"
                :value="[item.containerType, item.containerSize]"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item label="空重(吨)" prop="cstatus">
            <el-select v-model="form.cstatus" placeholder="请选择" clearable style="width:150px" @change="cstatusChange">
              <el-option label="空" value="E"></el-option>
              <el-option label="重" value="F"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item v-if="type == 'E'" label="箱货总重(吨)" prop="cweight">
            <el-input v-model="form.cweight" placeholder="请输入箱货总重(吨)" clearable style="width:150px"></el-input>
          </el-form-item>
        </el-col>

          <el-col :span=8>
              <el-form-item label="持箱人" prop="cstCopercd">
                  <el-select v-model="form.cstCopercd" placeholder="请选择" clearable filterable style="width:150px">
                      <el-option v-for="item in cstCopercdList" :key="item.id" :label="item.customerCode + '/' + item.name"
                                 :value="item.customerCode"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
            <!-- v-if="type == 'I'" -->
              <el-form-item  label="箱控公司" prop="cstOwnercd">
                  <el-select v-model="form.cstOwnercd" placeholder="请选择" clearable style="width:150px" filterable>
                      <el-option v-for="item in cstOwnercdList" :key="item.id" :label="item.customerCode + '/' + item.name"
                                 :value="item.customerCode"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
              <el-form-item label="内外贸" prop="internalfg">
                  <el-select v-model="form.internalfgName" placeholder="请选择" clearable style="width:150px"
                             @change="changeSelect('internalfg', 'internalfgName', $event)">
                      <el-option v-for="item in intradeList" :key="item.lowValue" :label="item.meaning"
                                 :value="[item.lowValue, item.meaning]"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
              <el-form-item label="缴费单位" prop="chargeCstmcd">
                  <el-select v-model="form.chargeCstmcd" placeholder="请选择" clearable filterable style="width:150px">
                      <el-option v-for="item in chargeCstmcdList" :key="item.id" :label="item.customerCode + '/' + item.name"
                                 :value="item.customerCode"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
              <el-form-item label="卸货港" prop="potUnldport">
                  <el-select v-model="form.potUnldportName" placeholder="请选择" clearable filterable style="width:150px"
                             @change="changeSelect('potUnldport', 'potUnldportName', $event)">
                      <el-option v-for="item in portList" :key="item.id" :label="item.portcd + '/' + item.portlocnnm"
                                 :value="[item.portcd, item.portlocnnm]"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
              <el-form-item label="目的港" prop="potDstnport">
                  <el-select v-model="form.potDstnportName" placeholder="请选择" clearable filterable style="width:150px"
                             @change="changeSelect('potDstnport', 'potDstnportName', $event)">
                      <el-option v-for="item in portList" :key="item.id" :label="item.portcd + '/' + item.portlocnnm"
                                 :value="[item.portcd, item.portlocnnm]"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span=8>
              <el-form-item label="是否中转" prop="tranship">
                  <el-select v-model="form.transhipName" placeholder="请选择" clearable style="width:150px"
                             @change="changeSelect('tranship', 'transhipName', $event)">
                      <el-option v-for="item in transhipList" :key="item.lowValue" :label="item.meaning"
                                 :value="[item.lowValue, item.meaning]"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>

        <el-col :span=8>
          <el-form-item label="装货港" prop="potLdport">
            <el-select v-model="form.potLdportName" placeholder="请选择" clearable filterable style="width:150px"
              @change="changeSelect('potLdport', 'potLdportName', $event)">
              <el-option v-for="item in portList" :key="item.id" :label="item.portcd + '/' + item.portlocnnm"
                :value="[item.portcd, item.portlocnnm]"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span=8>
            <el-form-item label="铅封号" prop="sealno">
                <el-input v-model="form.sealno" placeholder="请输入铅封号" clearable style="width:150px"></el-input>
            </el-form-item>
        </el-col>

        <el-col :span=8>
          <el-form-item label="残损" prop="brkdmgcd">
            <el-select v-model="form.brkdmgcd" placeholder="请选择" clearable style="width:150px">
              <el-option v-for="item in brkdmgcdList" :key="item.id" :label="item.lowValue + '/' + item.meaning"
                :value="item.lowValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item label="冷藏温度" prop="settmpt">
            <el-input v-model="form.settmpt" placeholder="请输入冷藏温度" clearable style="width:150px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item v-if="type == 'I'" label="温度单位" prop="tmptunit">
            <el-select v-model="form.tmptunit" placeholder="请选择" clearable style="width:150px">
              <el-option v-for="item in tmptunitList" :key="item.id" :label="item.lowValue + '/' + item.meaning"
                :value="item.lowValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item label="危险等级" prop="dtpDnggcd">
            <el-select v-model="form.dtpDnggcd" placeholder="请选择" clearable style="width:150px">
              <el-option v-for="item in dtpDnggcdList" :key="item.id" :label="item.dnggcd + '/' + item.dnggnm"
                :value="item.dnggcd"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span=8>
          <el-form-item label="联合国编码" prop="unno">
            <el-input v-model="form.unno" placeholder="请输入联合国编码" clearable style="width:150px"></el-input>
          </el-form-item>
        </el-col>
        <template v-if="type == 'I'">
          <el-col :span=8>
            <el-form-item label="前超 (米)" prop="fovlength">
              <el-input v-model="form.fovlength" placeholder="请输入前超 (米)" clearable style="width:150px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=8>
            <el-form-item label="后超(米)" prop="bovlength">
              <el-input v-model="form.bovlength" placeholder="请输入后超(米)" clearable style="width:150px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=8>
            <el-form-item label="左超(米)" prop="lovwidth">
              <el-input v-model="form.lovwidth" placeholder="请输入左超(米)" clearable style="width:150px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=8>
            <el-form-item label="右超(米)" prop="rovwidth">
              <el-input v-model="form.rovwidth" placeholder="请输入右超(米)" clearable style="width:150px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=8>
            <el-form-item label="超高(米)" prop="ovheight">
              <el-input v-model="form.ovheight" placeholder="请输入超高(米)" clearable style="width:150px"></el-input>
            </el-form-item>
          </el-col>
        </template>

      </el-row>
    </el-form>
    <div class="btn">
      <el-button type="primary" size="small" style="background-color:#043AA7" @click="addBox">保存</el-button>
      <el-button type="info" plain size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addBox',
  props: {
    item: {},
    deliverOriginalData:{
      type:Function
    }
  },
  components: {},
  data() {
    return {
      form: { },
      rules: {
        cntrno: [{ required: true, message: '请输入箱号', trigger: 'blur' }],
        cszCsizecd: [
          { required: true, message: '请选择箱型尺寸', trigger: 'change' },
        ],
        cstatus: [{ required: true, message: '请选择空重', trigger: 'change' }],
        cweight: [
          { required: true, message: '请输入箱货总重(吨)', trigger: 'blur' },
        ],
        potUnldport: [
          { required: true, message: '请选择卸货港', trigger: 'change' },
        ],
        potDstnport: [
          { required: true, message: '请选择目的港', trigger: 'change' },
        ],
        cstCopercd: [
          { required: true, message: '请选择持箱人', trigger: 'change' },
        ],
        internalfg: [
          { required: true, message: '请选择内外贸', trigger: 'change' },
        ],
        tranship: [
            { required: true, message: '请选择是否中转', trigger: 'change' },
        ],
        chargeCstmcd: [
          { required: true, message: '请选择缴费单位', trigger: 'change' },
        ],
        billno: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
        consignee: [
          { required: true, message: '请选择货主', trigger: 'change' },
        ],
        cstOwnercd: [
          { required: true, message: '请选择箱控公司', trigger: 'change' },
        ],
      },
      intradeList: [],
      cszCsizecdList: [],
      portList: [],
      cstCopercdList: [],
      chargeCstmcdList: [],
      brkdmgcdList: [],
      dtpDnggcdList: [],
      cstOwnercdList: [],
      tmptunitList: [],
      type: '',
      transhipList: [{"lowValue": "N", "meaning": "否"},{"lowValue": "Y","meaning": "是"}] // 是否中转
    }
  },

  methods: {
    getNowData(){
      return JSON.stringify(this.form)
    },
    changeSelect(prop, propName, e) {
      // console.log(prop, propName, e)
      this.form[prop] = e[0]
      this.form[propName] = e[1]
    },
    //箱型尺寸
    containerTypeSizeInfo() {
      this.$api.containerTypeSizeInfo().then((res) => {
        this.cszCsizecdList = res.data.data
      })
    },
    changeCszCsizecd(e) {
      this.$set(this.form, 'cszCsizecd', e[1])
      this.$set(this.form, 'ctypecd', e[0])
    },
    cstatusChange(val){
      if(val){
        this.$set(this.form, 'cstatusName', val == 'E' ? '空' : val == 'F' ? '重' : '')
      }else{
        this.$set(this.form, 'cstatusName', '')
      }
    },
    //港口
    port() {
      this.$api.port().then((res) => {
        this.portList = res.data.data
      })
    },
    customerByType() {
      //持箱人
      this.$api
        .customerByType({ tenantTypeName: '持箱人' })
        .then((res) => {
          this.cstCopercdList = res.data.data
        })
        .catch((err) => { })
      //箱控公司
      this.$api
        .customerByType({ tenantTypeName: '箱控公司' })
        .then((res) => {
          this.cstOwnercdList = res.data.data
        })
        .catch((err) => { })
    },
    refCode() {
      //内外贸
      this.$api
        .refCode({ domain: 'INTERNALFG_IM' })
        .then((res) => {
          this.intradeList = res.data.data
        })
        .catch((err) => { })
      //残损
      this.$api
        .refCode({ domain: 'BRKDMGCD' })
        .then((res) => {
          this.brkdmgcdList = res.data.data
        })
        .catch((err) => { })
      //温度单位
      this.$api
        .refCode({ domain: 'TMPT_UNIT' })
        .then((res) => {
          this.tmptunitList = res.data.data
        })
        .catch((err) => { })
    },
    //危险等级
    dangerCode() {
      this.$api.dangerCode().then((res) => {
        this.dtpDnggcdList = res.data.data
      })
    },
    //缴费单位
    customer() {
      this.$api.customer().then((res) => {
        this.chargeCstmcdList = res.data.data
      })
    },
    addBox() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('addItem', this.form)
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
    },
  },

  computed: {
    sizeType: {
      get() {
        if (this.form.ctypecd)
          return this.form.ctypecd + '/' + this.form.cszCsizecd
      },
      set(value) { },
    },
  },

  mounted() {
    // I 卸船清单 E 装船清单
    this.type = this.$route.name == 'unloadList' ? 'I' : 'E'
    this.containerTypeSizeInfo()
    this.port()
    this.customerByType()
    this.refCode()
    this.dangerCode()
    this.customer()
    //保存打开时的弹窗数据
    this.deliverOriginalData(JSON.stringify(this.form))
  },
}
</script>
<style lang='less' scoped>
.box-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
  line-height: 20px;
  padding-left: 10px;
  border-left: 5px solid #4980d5;
  margin-bottom: 10px;
}

.btn {
  text-align: center;

  .el-button {
    width: 80px;
  }
}
/* form-item样式修改 */
/deep/.el-form-item{
  width: 100%;
}
/deep/.el-form-item__content{
  width: calc(100% - 130px);
}
/deep/.el-select{
  width: 100% !important;
}
/deep/.el-input{
  width: 100% !important;
}
</style>